<template>
	<view>
		<l-painter ref="painter" :css="{
			width: '640rpx',
			height: '960rpx',
			'border-radius': '10rpx',
			background: '#fff',
			overflow: 'hidden',
		}" @fail="handleFail" custom-style="position: fixed; left: 200%">
			<l-painter-image v-if="getConfig.background_type == 2" :src="getConfig.background_url" :css="{
				position: 'absolute',
				width: '640rpx',
			}" />
			<l-painter-view v-if="getConfig.background_type" :css="{
				position: 'absolute',
			}">
				<l-painter-image v-if="getConfig.show.goods_img" :src="options.goods.image" :css="{
					position: 'absolute',
					top: getConfig.id == 1 ? '120rpx' : 0,
					left: getConfig.id == 1 ? '40rpx' : 0,
					'object-fit': 'cover',
					'object-position': 'center',
					width: getConfig.id == 1 ? '560rpx' : '640rpx',
					height: getConfig.id == 1 ? '560rpx' : '640rpx',
				}" />
				<l-painter-view :css="{
					position: 'absolute',
					left: '40rpx',
					top: '20rpx',
					display: 'flex',
					'align-items': 'center',
				}">
					<l-painter-image v-if="getConfig.show.user_avtar" :src="options.avatar" :css="{
						width: '72rpx',
						height: '72rpx',
						'border-radius': '50%',
					}" />
					<l-painter-text v-if="getConfig.show.user_name"
						:text="`${$zhTran('来自')}${options.nickname}${$zhTran('的分享')}`" :css="{
							color: getConfig.style.user_name,
							'line-clamp': 1,
							'margin-left': '18rpx',
							width: '400rpx',
						}" />
				</l-painter-view>

				<l-painter-view :css="{
					position: 'absolute',
					top: getConfig.id == 1 ? '700rpx' : '770rpx',
					left: getConfig.qrcode_align == 2 ? '40rpx' : '230rpx',
					'vertical-align': 'bottom',
					lineHeight: '1.4em',
				}">
					<l-painter-view v-if="getConfig.show.goods_sale_price" :css="{
						color: getConfig.style.goods_sale_price,
						display: 'inline-block',
					}">
						<l-painter-text text="￥" :css="{
							fontSize: '28rpx',
						}" />
						<l-painter-text v-if="price.prev" :text="price.prev" :css="{
							fontSize: '42rpx',
						}" />
						<l-painter-text v-if="price.next" :text="price.next" :css="{
							fontSize: '28rpx',
						}" />
					</l-painter-view>
					<l-painter-text v-if="getConfig.show.goods_origin_price" :text="marketPrice" :css="{
						fontSize: '28rpx',
						'vertical-align': 'bottom',
						'padding-left': '10rpx',
						'text-decoration': 'line-through',
						color: getConfig.style.goods_origin_price,
					}" />
				</l-painter-view>
				<l-painter-text v-if="getConfig.show.goods_name" :css="{
					position: 'absolute',
					top: getConfig.id == 1 ? '780rpx' : '660rpx',
					left:
						getConfig.qrcode_align == 2 || getConfig.id == 2
							? '40rpx'
							: '230rpx',
					'line-clamp': 2,
					lineHeight: '1.5em',
					fontSize: '30rpx',
					width: getConfig.id == 1 ? '380rpx' : '560rpx',
					color: getConfig.style.goods_name,
				}" :text="getGoods.name">
				</l-painter-text>
				<l-painter-view v-if="getConfig.show.qrcode" :css="{
					position: 'absolute',
					top: getConfig.id == 1 ? '700rpx' : '770rpx',
					left: getConfig.qrcode_align == 2 ? '440rpx' : '40rpx',
				}">
					<!-- #ifdef H5 || APP-PLUS -->
					<l-painter-qrcode css="width: 160rpx; height: 160rpx;" :text="link">
					</l-painter-qrcode>
					<!--  #endif -->
					<!-- #ifdef MP -->
					<l-painter-image :src="qrcode" css="width: 160rpx; height: 160rpx;" />
					<!--  #endif -->
				</l-painter-view>
				<l-painter-text v-if="getConfig.show.qrcode_title" :text="$zhTran('长按识别二维码')" :css="{
					position: 'absolute',
					top: '870rpx',
					left:
						getConfig.id == 1
							? getConfig.qrcode_align == 1
								? '40rpx'
								: '440rpx'
							: getConfig.qrcode_align == 1
								? '230rpx'
								: '40rpx',
					fontSize: '24rpx',
					color: getConfig.style.qrcode_title,
				}" />
			</l-painter-view>
		</l-painter>
	</view>
</template>

<script>
export default {
	name: "share-poster",
	props: {
		options: {
			type: Object,
			default: () => ({}),
		},
		qrcode: {
			type: [String],
			default: "",
		},
		link: {
			type: String,
			default: "",
		},
		type: {
			type: String,
			default: "goods",
		},
	},
	data() {
		return {};
	},
	computed: {
		price() {
			let {
				min_price
			} = this.getGoods;
			if (min_price == undefined) return {};
			let price = String(parseFloat(min_price)).split(".");
			return {
				prev: price[0],
				next: price[1] ? `.${price[1]}` : "",
			};
		},
		marketPrice() {
			return `￥${parseFloat(this.getGoods.min_lineation_price)}`;
		},
		getConfig() {
			return (
				this.options.config || {
					show: {},
					style: {},
				}
			);
		},
		getGoods() {
			return this.options.goods || {};
		},
	},
	methods: {
		handleFail() {
			this.$emit("fail");
		},
		drawCanvas() {
			// 生成图片
			this.$refs.painter.canvasToTempFilePathSync({
				fileType: "png",
				// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				pathType: "url",
				quality: 1,
				success: (res) => {
					this.$emit("success", res.tempFilePath);
				},
			});
		},
	},
};
</script>

<style></style>